<template>
  <div class="intercepted-list">
    <div v-if="filteredIntercepted.length === 0" class="empty-state">
      <div class="empty-icon">🎯</div>
      <div class="empty-text">
        {{ store.interceptedSearchKeyword ? '未找到匹配的拦截规则' : '暂无拦截规则' }}
      </div>
      <div class="empty-hint">
        {{ store.interceptedSearchKeyword ? '尝试修改搜索关键词' : '从网络请求列表中选择要拦截的接口' }}
      </div>
    </div>
    
    <div v-else class="intercepted-items">
      <div 
        v-for="item in filteredIntercepted" 
        :key="item.id"
        class="intercepted-item"
        :class="{ enabled: item.enabled, disabled: !item.enabled }"
      >
        <div class="intercepted-header">
          <div class="intercepted-info">
            <div class="intercepted-url" :title="item.url">
              {{ item.url }}
            </div>
            <div class="intercepted-status">
              <el-switch
                :model-value="item.enabled"
                @change="toggleRule(item.id)"
                size="small"
              />
              <span class="status-text">
                {{ item.enabled ? '已启用' : '已禁用' }}
              </span>
            </div>
          </div>
          <div class="intercepted-actions">
            <el-button 
              type="primary" 
              size="small" 
              @click="editRule(item)"
            >
              编辑
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="deleteRule(item.id)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
      
      <div v-if="hasMoreIntercepted" class="more-hint">
        <el-button type="text" size="small">
          已显示前20条拦截规则，共 {{ totalIntercepted }} 条
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useInterceptorStore } from '@/stores/interceptor'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash-es'

const emit = defineEmits(['edit'])
const store = useInterceptorStore()

// 过滤拦截列表
const filteredIntercepted = computed(() => {
  return store.getFilteredIntercepted()
})

// 切换规则启用状态
const toggleRule = debounce((id) => {
  store.toggleInterceptRule(id)
  const item = store.interceptedRequests.find(item => item.id === id)
  ElMessage.success(
    `拦截规则已${item.enabled ? '启用' : '禁用'}`
  )
  // 更新注入脚本
  store.updateInjectedScript()
}, 300)

// 编辑规则
const editRule = (item) => {
  emit('edit', item)
}

// 删除规则
const deleteRule = async (id) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个拦截规则吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    store.removeInterceptRule(id)
    ElMessage.success('拦截规则已删除')
    // 更新注入脚本
    store.updateInjectedScript()
  } catch {
    // 用户取消删除
  }
}
</script>

<style scoped>
.intercepted-list {
  height: 100%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6c757d;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.empty-hint {
  font-size: 12px;
  opacity: 0.7;
}

.intercepted-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intercepted-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s;
}

.intercepted-item.enabled {
  border-color: #28a745;
  background: #f8fff9;
}

.intercepted-item.disabled {
  border-color: #dc3545;
  background: #fff8f8;
  opacity: 0.7;
}

.intercepted-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.intercepted-info {
  flex: 1;
  min-width: 0;
}

.intercepted-url {
  font-size: 12px;
  color: #495057;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}

.intercepted-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-text {
  font-size: 12px;
  color: #6c757d;
}

.intercepted-actions {
  display: flex;
  gap: 8px;
}
</style>
